<template>
	<div class="index">
		<el-row :gutter="20">
			<el-col :span="6">
				<el-card class="box-card">
					<h3>累计商品数</h3>
					<div>
						<i class="el-icon-s-shop" style="color: purple"></i>
						<span>{{ count.goods }}</span>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card">
					<h3>累计用户数</h3>
					<div>
						<i class="el-icon-user-solid" style="color: green"></i>
						<span>{{ count.user }}</span>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card">
					<h3>订单数</h3>
					<div>
						<i class="el-icon-s-flag" style="color: red"></i>
						<span>{{ count.order }}</span>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card">
					<h3>入驻商家数</h3>
					<div>
						<i class="el-icon-star-on" style="color: blue"></i>
						<span>{{ count.shop }}</span>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="16">
				<el-card class="box-card">
					<echarts1 :data="userMain.users" :x-data="userMain.times" />
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card class="box-card">
					<echarts2 :data="categoryMains" />
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import echarts1 from "@/components/index/echars/echars1.vue"
import echarts2 from "@/components/index/echars/echars2.vue"
import { getIndexCount, getIndexMain } from "@/api/index.js"

export default {
	name: "FrontIndex",
	components: {
		echarts1,
		echarts2,
	},
	data() {
		return {
			count: {
				goods: "0",
				user: "0",
				order: "0",
				shop: "0",
			},
			userMain: {
				users: [],
				times: [],
			},
			categoryMains: [],
		}
	},
	mounted() {
		this.setIndexCount()
		this.setIndexMain()
	},
	methods: {
		async setIndexCount() {
			let res = await getIndexCount()
			if (res.code == 200) {
				let count = this.count
				count.goods = res.data.goodsCount
				count.user = res.data.userCount
				count.order = res.data.orderCount
				count.shop = res.data.shopCount
			}
		},
		async setIndexMain() {
			let res = await getIndexMain()
			if (res.code == 200) {
				let userMain = this.userMain
				userMain.users = this.$Tool.parseInts(res.data.userMain.users)
				userMain.times = res.data.userMain.times
				this.categoryMains = res.data.categoryMains
			}
		},
	},
}
</script>

<style scoped>
.el-card {
	margin-bottom: 20px;
	text-align: center;
}
</style>
